'use client';
import React, {useState} from 'react';
import {useRouter} from 'next/navigation'
// 注册页
const Register = () => {

    const router = useRouter()

    const [email, setEmail] = useState()
    const [password, setPassword] = useState()

    const submit = async (e) => {
        e.preventDefault()
        console.log(email, password)

        const res = await fetch('http://localhost:3000/api/register', {
            method: 'POST',
            body: JSON.stringify({
                email, password
            }),
            headers: {
                'Content-Type': 'application/json',
            }
        })

        const json = await res.json()
        console.log(json)

        if (!res.ok) return alert('注册失败: ' + json[0].message)
        console.log(json)
        alert("注册成功")
        router.push('/')
    }

    return (
        <div
            className={'flex flex-col items-center w-screen h-screen'}>
            <h1 className={'text-3xl font-bold mb-8'}>注册</h1>
            <form onSubmit={submit}
                  className={'rounded-lg w-1/2 h-1/2 bg-sky-100 flex flex-col items-center justify-center gap-5'}>
                <input
                    className={'border rounded-lg p-2'}
                    type="email" value={email}
                    onChange={(e) => setEmail(e.target.value)}/>
                <input
                    className={'border rounded-lg p-2'}
                    type="password" value={password}
                    onChange={(e) => setPassword(e.target.value)}/>
                <button
                    className={'bg-blue-300 p-2 rounded-lg'}
                    type={'submit'}>注册
                </button>
            </form>
        </div>
    );
};

export default Register;